<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>Test</title>
  </head>
  <body>
    <article id="app"></article>
    <!-- <a class="one">hello</a>
    <a class="two">world</a>
    <script>
      var o = document.querySelectorAll('a');
      o.forEach(item => {
        item.addEventListener('click',(e) => {
          e.preventDefault();
          let link = item.textContent;
          // console.log(link);
          window.history.pushState({name:'api'},'',link)
        })
      })
      window.addEventListener('popstate',e => {
        console.log({
          location:location.href,
          state:e.state
        })
      })

      
    </script>


    <a class="one">btn1</a> 
    <a class="two">btn2</a>
    <script>
      var o = document.querySelectorAll('a');
      o.forEach(item => {
        item.addEventListener('click',(e) => {
          e.preventDefault();
          let link = item.textContent;
          // console.log(link);
          location.hash = link
        })
      })
      window.addEventListener('hashchange', () => {
        console.log({
          location:location.href,
          hash:location.hash
        })
      })
    </script> -->
</body>
</html>
